<template>
  <div>
    <y-shelf title="我的订单">
      <div slot="content">
        <div v-if="orderList.length">
          <div v-for="(item,i) in orderList" :key="i" class="table-waper">
            <div class="gray-sub-title cart-title">
              <div class="first">
                <div>
                  <span class="date" v-text="item.createDate" />
                  <span class="order-id"> 订单号： <a href="javascript:;">{{ item.id }}</a> </span>
                </div>
                <div class="f-bc">
                  <span>单价</span>
                  <span>数量</span>
                  <span>商品操作</span>
                </div>
              </div>
              <div class="last">
                <span>实付金额</span>
                <span> <a href="javascript:;" @click="viewProduct(item.product.id)">查看详情<em class="icon-font" /></a> </span>
              </div>
            </div>
            <el-row>
              <div class="cart">
                <div class="cart-l bt">
                  <el-col :span="8">
                    <div class="img-box"><img
                      :src="item.product.image"
                      alt=""
                    ></div>
                  </el-col>
                  <el-col :span="8">
                    <div class="ellipsis">{{ item.product.name }}</div>
                  </el-col>
                  <el-col :span="13" />
                  <el-col :span="8">
                    <div class="ellipsis">¥{{ item.product.prices }}</div>
                  </el-col>
                  <el-col :span="8">
                    <div class="ellipsis">{{ item.productNum }}</div>
                  </el-col>
                  <el-col :span="8">
                    <div class="ellipsis">{{ item.pay ? '已支付' : '未支付' }} </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="ellipsis">¥{{ item.productNum *item.product.prices }} </div>
                  </el-col>
                  <el-col :span="8">
                    <a
                      href="javascript:;"
                      class="del-order ellipsis"
                      @click="handleDeleteOrder(item.id,i)"
                    >删除此订单</a>
                  </el-col>
                  <el-col :span="8">
                    <div v-if="item.pay">
                      <a
                        v-if="item.status==='已发货'"
                        href="javascript:;"
                        class="del-order ellipsis"
                        @click="handleReceiveOrder(item.id,i)"
                      >确认收货</a>
                      <a
                        v-else-if="item.status==='已支付'"
                        href="javascript:;"
                        class="del-order ellipsis"
                      >已经付款</a>
                      <a
                        v-else-if="item.status==='待发货'"
                        href="javascript:;"
                        class="del-order ellipsis"
                      >买家尚未发货</a>
                      <a
                        v-else-if="item.status==='已收货'"
                        href="javascript:;"
                        class="del-order ellipsis"
                        @click="setComment(item.id,i)"
                      >已经收货(进行评论)</a>
                      <a
                        v-else-if="item.status==='已评论'"
                        href="javascript:;"
                        class="del-order ellipsis"
                        @click="viewComment(item.id,i)"
                      >查看评论</a>
                    </div>
                  </el-col>
                </div>
              </div>
            </el-row>
          </div>
          <el-pagination
            style="text-align: center;"
            layout="total,prev, pager,next"
            :total="orderTotal"
            :current-page="listQuery.page"
            @current-change="handleCurrentChange"
          />
        </div>

        <div v-else>
          <div style="padding: 100px 0;text-align: center">
            你还未创建过订单
          </div>
        </div>
      </div>
    </y-shelf>

    <y-popup :open="popupOpen" title="评价商品" @close="popupOpen=false">
      <div slot="content" class="md" :data-id="cOrder.id">
        <div>
          <input v-model="cOrder.comment" type="text" placeholder="商品评价">
        </div>
        <div>
          <input v-model="cOrder.rating" type="number" placeholder="商品评分">
        </div>
        <y-button
          text="确定"
          class="btn"
          :class-style="canSaveComment?'main-btn':'disabled-btn'"
          @btnClick="saveComment()"
        />
      </div>
    </y-popup>
  </div>
</template>
<script>
import { orderList, delOrder, recOrder, ratOrder } from '@/api/goods'
import YShelf from '@/components/shelf'
import YPopup from '@/components/popup'
import YButton from '@/components/YButton'
export default {
  components: {
    YShelf,
    YPopup,
    YButton
  },
  data() {
    return {
      orderList: [],
      orderTotal: 0,
      listQuery: {
        page: 1,
        size: 10
      },
      popupOpen: false,
      cOrder: {},
      cOrderIndex: {},
      canSaveComment: false
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      const { size, page } = this.listQuery
      orderList({ page: page - 1, size })
        .then(res => {
          console.log(res.data.items)
          this.orderList = res.data.items
          this.orderTotal = res.data.total
        }, err => {
          console.warn(err)
          this.$message.warning('加载数据失败')
        })
    },
    handleDeleteOrder(orderId, i) {
      delOrder({ orderId }).then(res => {
        if (res.success) {
          this.orderList.splice(i, 1)
          this.orderTotal--
        } else {
          this.$message.warning('删除失败')
        }
      })
    },
    handleReceiveOrder(orderId, i) {
      recOrder({ orderId }).then(res => {
        if (res.success) {
          this.orderList[i].status = '已收货'
        }
      })
    },
    viewComment(orderId, i) {
      this.cOrder = this.orderList[i]
      this.cOrderIndex = i
      this.popupOpen = true
      this.canSaveComment = false
    },
    setComment(orderId, i) {
      this.cOrder = this.orderList[i]
      this.cOrderIndex = i
      this.popupOpen = true
      this.canSaveComment = true
    },
    saveComment() {
      ratOrder(this.cOrder).then(res => {
        if (res.success) {
          this.orderList[this.cOrderIndex].status = '已评论'
        } else {
          this.$message.warning('评论失败,请稍后再试')
        }
        this.popupOpen = false
      })
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchList()
    },
    viewProduct(id) {
      this.$router.push('/goodsDetails?productId=' + id)
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "../../../assets/style/mixin";

  .table-waper {
    height: 100%;
  }

  .gray-sub-title {
    height: 38px;
    padding: 0 24px;
    background: #EEE;
    border-top: 1px solid #DBDBDB;
    border-bottom: 1px solid #DBDBDB;
    line-height: 38px;
    font-size: 12px;
    color: #666;
    display: flex;
    span {
      display: inline-block;
      height: 100%;
    }
    .first {
      display: flex;
      justify-content: space-between;
      flex: 1;
      .f-bc {
        > span {
          width: 112px;
          text-align: center;
        }
      }
    }
    .last {
      width: 230px;
      text-align: center;
      display: flex;
      border-left: 1px solid #ccc;
      span {
        flex: 1;
      }
    }
  }

  .bt {
    border-top: 1px solid #EFEFEF;
  }

  .date {
    padding-left: 6px;
  }

  .order-id {
    margin-left: 20px;
  }

  .cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    &:hover {
      .del-order {
        display: block;
      }
    }
    .del-order {
      display: none;
    }
    .cart-l {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 15px 0;
      justify-content: space-between;
      position: relative;
      &:before {
        position: absolute;
        content: ' ';
        right: -1px;
        top: 0;
        width: 1px;
        background-color: #EFEFEF;
        height: 100%;
      }
      .ellipsis {
        margin-left: 20px;
      }
      .img-box {
        border: 1px solid #EBEBEB;
      }
      img {
        display: block;
        @include wh(80px);
      }
      .cart-l-r {
        display: flex;
        > div {
          text-align: center;
          width: 112px;
        }
      }
      .cart-l-l {
        display: flex;
        align-items: center;
      }
    }
    .cart-r {
      width: 230px;
      display: flex;
      span {
        text-align: center;
        flex: 1;
      }
    }
  }

  .prod-operation {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 254px;
    div {
      width: 100%;
      text-align: center;
    }
    div:last-child {
      padding-right: 24px;
    }
  }

  .md {
    > div {
      text-align: left;
      margin-bottom: 15px;
      > input {
        width: 100%;
        height: 50px;
        font-size: 18px;
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-shadow: 0 3px 5px -4px rgba(0, 0, 0, .4) inset, -1px 0 3px -2px rgba(0, 0, 0, .1) inset;
        line-height: 46px;
      }
    }
  }

  .btn {
    margin: 0;
    width: 100%;
    height: 50px;
    font-size: 14px;
    line-height: 48px
  }
</style>
